@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

* {
cursor: default;
-vendor-box-sizing: border-box;
}
*:focus {
outline: none;
}
html,
body {
height: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background-color: $(color:threedface);
color: $(color:windowtext);
}
form { /* assuming that all forms are standard body-childnode dot net forms! */
height: 100%;
padding: 0;
margin: 0;	
}
p {
margin: 0 0 1.3em 0;	
}
textarea,					
input {
cursor: text;
-vendor-user-select: text;
-vendor-resize: none;
}
html,
input,
textarea,
button,
select,
td,
th {
#region default
font-family: Tahoma, sans-serif;
font-size: 11px;
#endregion
#region vista
font-family: "Segoe UI", Tahoma, sans-serif;
font-size: 12px;
#endregion
#region osx
font-family: "Lucida Grande", sans-serif;
font-size: 11px;
#endregion
}
img.designmodesanitizer {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 24px; /* ie must have a fixed px height */
z-index: 2; /* above selectorindicator in EditorSelectorBinding */
}
*.padded {
padding: 30px 30px 30px 40px;
}
a.buttonurl {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
#ie background-color: pink;
#ie opacity: 0;

}
ui|binding,
ui|feedbackset { /* ONLY MAW USES THIS FOR NOW! */
display: none;	
}
ui|box {
display: block;
}
ui|cover {
display: block;
position: absolute;
overflow: hidden;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $(color:threedface);
}
ui|cover.transparent {
background-color: transparent;
}
ui|*.maxboxelement,
ui|*.flexboxelement {
display: block;
height: 100%;
overflow: hidden;
}

@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
{
ui|*.maxboxelement,
ui|*.flexboxelement {
height: auto;
overflow: auto;
}
}


/* Fix for IE9-10 */
ui|wizardpage > .flexboxelement,
ui|dialogpage > .flexboxelement {
height: auto;
}

ui|*.clearfloatelement:after {
content: "";
width: 1px;
height: 1px;
overflow: hidden;
margin-bottom: -1px;
display: block;
clear: both;
}


ui|persistance {
display: none;
#ie behavior: url(#default#userdata);
}

ui|window {
display: block;
position: relative; /* to contain a possible cover */

}
iframe {
display: block;
width: 100%;
height: 100%;
overflow: auto; /*?*/
-webkit-overflow-scrolling: touch;
border: none !important;
border-width: 0;
}
ui|scrollbox {
display: block;
height: 100%;
overflow: auto !important;
position: relative; /* marks srollbox as an "offsetparent" for position calculations */
}
ui|scrollbox.infobox {
background-color: white;
border: 1px solid;
border-color: $(color:threeddarkshadow) $(color:threedshadow) $(color:threedshadow) $(color:threeddarkshadow);
}
a  {
text-decoration: none;
color: $(color:windowtext);
}
a img {
border: none;
cursor: pointer;
}
ui|status {
display: none;	
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|updatepanel,
ui|updatepanelbody {
display: block;
overflow: hidden !important;
}
ui|updatepanel.flex,
ui|updatepanel.flex ui|updatepanelbody {
height: 100%;
overflow: hidden !important;
}
ui|updatepanel.inline,
ui|updatepanel.inline ui|updatepanelbody {
display: inline;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|text,
ui|header {
display: block;
-vendor-user-select: none; /* See notes in DocumentManager.js */	
}
ui|text {
margin: 0 0 1em 0;
}
ui|header {
font-weight: bold;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|labelbox {
display: block;
float: left;
white-space: nowrap;
-vendor-user-select: none; /* See notes in DocumentManager.js */
}
ui|labelbox.toolbartext {
margin-top: 4px;	
}
ui|labelbody {
background: transparent none no-repeat 0 0;
display: block;
float: left;
margin-left: auto !important;
}
ui|labelbox.flipped ui|labelbody {
background-position: 100% 0;
padding-left: 0 !important;
}
ui|labelbody,
ui|*.imagesizenormal ui|labelbody {
height: 16px;
padding-left: 16px;
}
ui|labelbox.flipped ui|labelbody,
ui|*.imagesizelarge ui|labelbox.flipped ui|labelbody {
padding-right: 16px;
}
ui|*.imagesizelarge ui|labelbody {
height: 24px;
padding-top: 5px;
padding-left: 28px; /* 28px 4px added space */
}
ui|*.imagesizelarge ui|labelbox.flipped ui|labelbody {
padding-right: 28px;
}
ui|*.imagesizelarge ui|labelbox.imageonly ui|labelbody {
padding-left: 24px;
}
ui|*.imagesizexlarge ui|labelbody {
height: 32px;
padding-left: 36px; /* 36 4px added space */
}
ui|*.imagesizexlarge ui|labelbox.imageonly ui|labelbody {
padding-left: 32px;
}

ui|*.textonly ui|labelbody,
ui|labelbox.textonly ui|labelbody {
padding-left: 0 !important;
background-position: -200px -200px; /* huh? */
}
ui|labeltext {
display: block;
float: left;
#ie text-overflow: ellipsis;
}
ui|*.textonly ui|labeltext,
ui|labelbox.textonly ui|labeltext {
padding-left: 5px !important;
}
ui|*.imagesonly ui|labeltext {
display: none;
padding-left: 0 !important;
}
ui|labelbox.both ui|labeltext {
#moz margin-left: 4px; 
#ie margin-left: 4px;
}
ui|labelbox.graytext ui|labeltext {
color: graytext;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|dialogset {
display: block;
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
z-index: 4; /* below popupset */
}
ui|dialog {
display: block;
background-color: $(color:threedface);
overflow: hidden;
position: absolute;
z-index: 6; /* above shadow - adjusted by script */
margin-top: -10000px;
padding: 0px; /* override chrome user agent stylesheet 1em */
border: none; /* override chrome user agent stylesheet */
}
ui|dialog.minimized {
border: 5px solid pink;
}
ui|dialog.maximized {
border: 5px solid lime;
}
ui|dialoghead,
ui|dialogbody {
display: block;
padding: 1px;
}
ui|dialoghead {
padding-bottom: 0 !important;
}
ui|dialogbody {
padding-top: 0 !important;
width: 100%; /* ie bug */
overflow: hidden;
}
ui|dialogmatrix {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
ui|dialog ui|dialogmatrix table.dialogmatrix {
width: 100%;
height: 100%;
}
ui|dialogmatrix td {
background-color: InactiveCaption;
}
ui|dialog.active ui|dialogmatrix td {
background-color: $(color:activecaption);
}
ui|dialogmatrix td.c {
height: 100%;
width: 100%;
#moz border: 1px solid $(color:threedface); /* moz bug */
#moz border-top: none;
background-color: $(color:threedface) !important;
}
ui|dialogborder {
position: absolute;
overflow: hidden;
z-index: 4;
}
ui|dialogborder.n {
top: 0;
left: 0;
width: 100%;
height: 4px;
}
ui|dialogborder.s {
bottom: 0;
left: 0;
width: 100%;
height: 4px;
}
ui|dialogborder.w {
top: 0;
left: 0;
width: 4px;
height: 100%;
}
ui|dialogborder.e {
top: 0;
right: 0;
width: 4px;
height: 100%;
}
ui|dialog.resizable ui|dialogborder.n {
cursor: n-resize;
}
ui|dialog.resizable ui|dialogborder.s {
cursor: s-resize;
}
ui|dialog.resizable ui|dialogborder.w {
cursor: w-resize;
}
ui|dialog.resizable ui|dialogborder.e {
cursor: e-resize;
} 
ui|dialogcover {
position: absolute;
height: 100%; /* adjusted by script */
width: 100%; /* adjusted by script */
left: 0;
top: 0;
z-index: 2; /* adjusted by script */
background-color: transparent;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/*
ui|dialogpage,
ui|wizardpage {
padding: 15px 14px 14px 14px;
}
*/


ui|pagebody {
display: block;
padding: 15px 14px 0 14px;
}
/*
ui|dialogpagebody { 
display: block;
padding: 2px 2px 0 2px;
}
*/
ui|dialogtoolbar {
display: block;
clear: both;
background-color: $(color:threedface);
white-space: nowrap;	
padding: 12px 11px 14px 12px;
margin-right: 0;
margin-left: 0;
}
ui|dialogtoolbar ui|clickbutton.focusable {
padding: 2px;
margin: 0 !important;
}
ui|dialogtoolbar ui|clickbutton.focused {
border: 1px solid $(color:threedshadow);
#region osx
border: 1px solid -moz-mac-focusring;
#endregion
padding: 1px;	
}

/* STANDARD DIALOGS ................................................................*/

table#dialoglayout {
margin: 0;
width: 306px;
table-layout: fixed;
}
table#dialoglayout td {
vertical-align: middle;
padding: 0;
}
table#dialoglayout td#dialogvignette {
padding: 0 0px 0 10px;
width: 60px;
}
table#dialoglayout td#dialogtext {
padding-bottom: 4px;
word-wrap: break-word;
}
ui|dialogvignette {
display: block;
width: 32px;
height: 32px;
}

/* standard dialog images in skin! */
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|popupset {
display: block;
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
z-index: 5; /* above dialogset */
/*
display: inline;
overflow: visible;
#moz position: absolute;
#ie position: static;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: 5;
*/
}
ui|popup,
ui|menupopup {
position: absolute;
z-index: 6;  /* above the shadow */ 
min-width: 160px;
visibility: hidden;
-vendor-transition-property: opacity;
-vendor-transition-duration: 0.15s;
-vendor-box-shadow: 2px 2px 4px rgba(0,0,0,0.75);
display: none;
border: 1px solid $(color:threedshadow);
-vendor-user-select: none;
}
ui|popupbody { /* NOT USED ON COMMON POPUPS! */
display: block;
padding: 10px 12px 10px 12px;
background-color: $(color:menu);
color: $(color:menutext);
-vendor-user-select: none;
}

/* OVERFLOW ................................................ */

ui|popup.overflow {
overflow-y: scroll;
height: 211px; /* move this to script when separators are supported */
border-right: none;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/* see also popups.css for shared visual styles!!!!!!! */

ui|menubar {
display: block;
border-top: 1px solid $(color:threedhighlight);
border-bottom: 1px solid $(color:threedshadow);
white-space: nowrap;
}
ui|menu {
display: block;
float: left;
margin: 0;
padding: 0;
}
ui|menubody {
display: block;
padding: 4px 2px 4px 2px;
background-color: $(color:menu);
color: $(color:menutext);
}
ui|menugroup {
display: block;
border-top: 1px solid $(color:threedhighlight);
border-bottom: 1px solid $(color:threedshadow);
padding: 5px 0 5px 0;
}
ui|menugroup.first {
border-top: none;
padding-top: 0;
}
ui|menugroup.last {
border-bottom: none;
padding-bottom: 0;
}
ui|menu ui|labelbox.menulabel {
padding: 4px 6px 1px 4px;
position: relative; /* ie something */
#region vista
padding-top: 2px;
padding-bottom: 2px;
#endregion
}
ui|menu.hover ui|labelbox.menulabel {
background-color: $(color:highlight);
color: $(color:highlighttext);	
}
ui|menuitem {
white-space: nowrap;
display: block;
clear: both;
position: relative;
}
ui|menuitem ui|menupopup,
ui|menuitem ui|shadow {
margin-top: -2px;
margin-left: -2px;
}
ui|menuitem.isdisabled,
ui|menu ui|menu.isdisabled {
color: $(color:graytext);
}
ui|menuitem ui|labelbox,
ui|menuitem ui|labelbody,
ui|menuitem ui|labeltext,
ui|menubody ui|labelbox,
ui|menubody ui|labelbody,
ui|menubody ui|labeltext
{
float: none;
clear: both;
}
ui|menuitem ui|labelbox {
padding: 2px 8px 2px 8px;
}
ui|menubody.checkboxed ui|menuitem ui|labelbox {
padding: 2px 8px 2px 24px;
}
ui|menuitem ui|labelbox.hover {
background-color: $(color:highlight);
color: $(color:highlighttext);
}
ui|menuitem ui|labeltext {
padding-left: 4px;
position: relative;
#moz top: 1px;
#ie top: 2px;
#region vista
top: 0;
_top: 1px;
#endregion
}
ui|popup.selectorpopup ui|menuitem ui|labeltext {
text-transform: none; /* selectors should NOT capitalize text! */
}
/* TODO: enable this and remove script hack!
ui|menuitem ui|label.textonly ui|labelbody {
padding-left: 16px;
}
*/
ui|menuitem ui|labelbox {
position: relative;
#ie width: 100%;
}
div.checkboxindicator {
font-family: Arial, sans-serif;
font-size: 11px;
position: absolute;
left: 7px;
top: 3px;
}
div.submenuindicator {
font-family: Arial, sans-serif;
font-size: 11px;	
position: absolute;
right: 7px;
top: 3px;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|shadow {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
z-index: 5; /* above the view - 2 should be enough, but FF3 needs this */ 
}
ui|shadow table.matrix {
width: 100%;
height: 100%;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/* see "toolbars.css" for styles shared with toolbarbutton */

/** NOTICE SHARED LAYOUT! */
ui|toolbarbutton,
ui|clickbutton,
ui|radiobutton,
ui|checkbutton,
ui|toolbarlabel {
display: block;
position: relative;
float: left;
margin-right: 2px;
overflow: hidden !important; /* contain added stuff */
}
ui|clickbutton table.matrix td.c {
padding: 3px 6px 2px 6px; /*5px 8px 4px 8px;*/
#moz: padding-bottom: 3px;
#region vista
padding: 3px 6px 4px 6px;
_padding: 3px 6px 2px 6px;
#endregion
}
ui|toolbar ui|clickbutton table.matrix td.c {
padding: 0 2px 0 2px;
}
/*
produce a pressed-down effect - unfortunately, 
this will crop images on small buttons!
ui|toolbarbutton.active ui|labelbox,
ui|clickbutton.active ui|labelbox {
position: relative;
top: 1px;
left: 1px;
#region osx
position: static;
#endregion
}
*/
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|matrix {
display: block;	
}
table.matrix td {
overflow: hidden;
width: 4px;
height: 4px;
padding: 0;
}
table.matrix td.n,
table.matrix td.s {
width: auto;
}
table.matrix td.e,
table.matrix td.w {
height: auto;

}
table.matrix td.c {
width: auto;
height: auto;
}
div.matrixbindingmanifester {
height: 1px;
overflow: hidden;
visibility: hidden;	
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|titlebar {
display: block;
font-weight: bold;
overflow: hidden;
}
ui|titlebarbody {
display: block;
position: relative;
padding: 5px 3px 4px 5px;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|controlgroup {
display: block;
float: right;

}
ui|control {
display: block;
float: left;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/* SEE ALSO BUTTONS.CSS */

ui|toolbar ui|selector {
margin-right: 2px;
float: left;
}
ui|toolbarbutton ui|labeltext,
ui|clickbutton ui|labeltext,
ui|toolbarlabel ui|labeltext {
padding: 1px 4px 3px 1px; /* REFACTOR THIS, SEE VISTA BELOW */
}
ui|toolbar ui|toolbarbutton ui|labeltext,
ui|toolbar ui|clickbutton ui|labeltext {
padding-bottom: 0;
}
ui|toolbarlabel {
padding: 4px;
}
#region vista
ui|toolbar ui|toolbarbutton ui|labeltext,
ui|toolbar ui|clickbutton ui|labeltext,
ui|toolbar ui|toolbarlabel ui|labeltext {
padding-top: 0;
}
#endregion

ui|toolbarbutton.isdisabled ui|labeltext,
ui|clickbutton.isdisabled ui|labeltext {
color: $(color:graytext);
}

ui|toolbarbody.alignright ui|toolbarbutton,
ui|toolbarbody.alignright ui|clickbutton {
margin-right: 0;
margin-left: 2px;
}
ui|toolbar {
display: block;
clear: both;
border-top: 1px solid $(color:threedhighlight);
border-bottom: 1px solid $(color:threedshadow);
background-color: $(color:threedface);
padding: 1px 3px 1px 3px;
white-space: nowrap;
}
ui|toolbar.plain {
border: none;	
}
ui|toolbar.statusbar {
border-top-color: $(color:threedlightshadow);
border-bottom: none;
}
ui|toolbarbody {
display: block;
float: left;
}
ui|toolbarbody.max {
/* this is actually scripted by ToolBarBinding */	
}
ui|toolbarbody.alignright {
float: right;
}
ui|toolbargroup {
display: block;
float: left;
border-right: 1px solid $(color:threedshadow);
border-left: 1px solid $(color:threedhighlight);
padding-left: 1px;
}
ui|toolbargroup.max {
float: none;	
}
ui|toolbargroup.first {
border-left: none;	
}
ui|toolbargroup.last {
border-right: none;
}
ui|toolbargroup.alignright {
float: right;	
}
ui|toolbargroup.defaultcontent {
width: 1px;
overflow: hidden;
margin-right: -1px;
visibility: hidden;
border: none;
}

/* combobutton */

ui|toolbarbutton.isdisabled ui|combobox {
color: $(color:graytext);
}

ui|toolbarbutton.combobutton ui|combobox {
border-left: 1px solid transparent;
margin: -4px -4px -4px 0;
display: block;
float: left;
line-height: 22px;
font-size: 9px;
padding-left: 5px;
padding-right: 5px;
-moz-user-select: none;
position: relative;
}

ui|toolbarbutton.combobutton table.matrix td{
overflow: visible;
}

ui|toolbarbutton.hover ui|combobox,
ui|toolbarbutton.active ui|combobox
{
border-left: 1px solid #A0A0A0;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|tabbox {
display: block;
background-color: $(color:threedface);
overflow: hidden;
/*width: 100%;*/
}
ui|tabs {
display: block;
position: relative !important;
overflow: hidden;
border-top: 1px solid $(color:threedhighlight);
height: 29px;
}
ui|tabbox.boxed ui|tabs {
border-top: none;
height: 28px;
}
ui|tabbox.tabsbelow ui|tabs {
border-top: none;
border-bottom: 1px solid $(color:threedshadow);	
}
ui|tab {
display: block;
float: left;
position: relative;
white-space: nowrap;
padding: 7px;
}
/*
ui|tab.selected {
text-decoration: underline;
}
*/
ui|tabpanels {
display: block;
height: 100%;
clear: both;
overflow: hidden;
}
ui|tabbox.boxed ui|tabpanels {
overflow: visible;
height: auto;
}
#region moz
ui|tabbox:not(.equalsize).boxed ui|tabpanels {
height: auto !important;
}
#endregion
ui|tabbox.equalsize ui|tabpanels {
overflow: hidden;
height: 100%;
}
ui|tabpanel {  /* styles comparable to deck - please coordinate all changes! */
display: block;
height: 100% !important;
overflow: hidden;
position: absolute;
top: -10000px;
}
ui|tabbox.equalsize ui|tabpanel {
overflow: visible;
height: auto !important;
}

/* TABLINER .................................................................... */

div.tabliner {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
#ie width: 110%; /* dont ask */
height: 3px;
overflow: hidden;
z-index: 2;
}
ui|tabbox.boxed div.tabliner {
#ie width: 100%; /* dont ask */
}
ui|tabbox.tabsbelow ui|tabs div.tabliner {
top: 0;
}

/* TABMANAGER .................................................................... */

ui|toolbarbutton.tabbutton {
position: absolute;
z-index: 400;
display: none;
background-color: transparent;
margin: 0;
padding: 0;
}
ui|toolbarbutton.tabbutton ui|labeltext {
font-weight: bold;
}
ui|toolbarbutton.tabbutton ui|labelbox span.arrow {
font-weight: normal;
font-size: 120%;
font-family: "Courier New", monospace;
position: relative;
top: -2px;
left: -2px;
#ie left: -4px;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/*
* Note that splitboxes and splitpanels have additional styles  
* for IE on the MAIN STAGE! See "app.css" and "stagedeck.css".
*/
ui|splitbox {
height: 100%;
display: block;
position: relative;
overflow: hidden;
}
ui|splitbox.maximized,
ui|splitpanel.maximized { /* used for stage stuff */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
ui|splitpanel {
display: block;
position: relative;
overflow: hidden;
}
ui|splitpanel.horizontal {
float: left;
}
ui|splitpanel.maximized {
float: none !important;	
}
ui|splitter {
display: block;
z-index: 2;
#ie font-size: 1px; /* cannot use overflow:hidden hack for IE6 */
position: relative;
background-color: $(color:threedface);
color: $(color:threedface); /* moz appends a text node inside the splitter */
}
ui|splitter.active {
z-index: 23; /* float to top while dragging */
}
ui|splitter.horizontal {
height: 100%;
width: 8px;
float: left;
border-right: 1px solid $(color:threedhighlight);
border-left: 1px solid $(color:threeddarkshadow);
}
ui|splitter.vertical {
height: 8px;
width: 100%;
border-bottom: 1px solid $(color:threedhighlight);
border-top: 1px solid $(color:threeddarkshadow);
}
ui|splitterbody {
display: block;
position: absolute;	
background-color: $(color:threedface);
}
ui|splitter.horizontal ui|splitterbody {
width: 8px;
height: 100%;
margin-left: -1px;
cursor: e-resize;
border-left: 1px solid $(color:threedhighlight);
border-right: 1px solid $(color:threeddarkshadow);
}
ui|splitter.horizontal ui|splitterbody.hover,
ui|splitter.horizontal ui|splitterbody.active {
-vendor-box-shadow: 2px 0 3px rgba(0,0,0,0.35);
}
ui|splitter.vertical ui|splitterbody {
height: 8px;
width: 100%;
cursor: n-resize;
margin-top: -1px;
border-top: 1px solid $(color:threedhighlight);
border-bottom: 1px solid $(color:threeddarkshadow);
}
ui|splitter.vertical ui|splitterbody.hover,
ui|splitter.vertical ui|splitterbody.active {
-vendor-box-shadow: 0 2px 3px rgba(0,0,0,0.35);
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/* remember that both dekcs and deck gets assigned the "flexboxelement" class! */

ui|*.deckselement {
display: block;
position: relative;
}
ui|*.deckelement {
display: block;
height: 100%;
clear: both;
overflow: hidden;
position: absolute;
top: -10000px;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|tree {
display: block;
overflow: hidden;
position: relative;

}
ui|treebody {
display: block;
background-color: Window;
color: $(color:windowtext);
overflow: auto !important;	
padding: 8px 6px 16px 6px;
}
ui|treenode,
ui|treecontent {
display: block;
float: none;
clear: both;
overflow: visible;
}
#region moz
ui|treenode:after { /* moz bug */
content: "";
width: 1px;
height: 1px;
overflow: hidden;
margin-bottom: -1px;
display: block;
clear: both;
}
#endregion
ui|treenode ui|labelbox {
background: none transparent no-repeat 1px 4px;
padding-left: 16px;
}
ui|treecontent {
padding-left: 40px;
-vendor-user-select: none; /* hope we don't need an input field */
}
ui|treenode ui|labelbox.focused ui|labeltext {
background-color: $(color:threedface) !important; /* too light for projection */
background-color: $(color:threedlightshadow) !important;
}
ui|tree.focused ui|treenode ui|labelbox.focused ui|labeltext {
background-color: $(color:highlight) !important;
color: $(color:highlighttext);
}
ui|treenode ui|treenode {
margin-left: 18px;
}
ui|treenode.closed ui|treenode,
ui|treenode.closed ui|treecontent {
display: none;
}
ui|treenode ui|labelbox { 
padding-bottom: 3px;
}
ui|treenode ui|labeltext {
line-height: 15px;
padding: 1px 4px 2px 4px;
#region vista
padding-right: 5px;
position: relative;
top: -1px;
#endregion
}
#region moz
ui|treenode.dragged {
opacity: 0.5;
}
#endregion 
#region ie
ui|treenode.dragged ui|labeltext { /* text disappears on alpha filter! */
color: $(color:graytext);		
}
}
#endregion
ui|treepositionindicator {
display: block;
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 1px;
overflow: hidden;
background-color: $(color:highlight);
z-index: -1;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/*
* Docks are absolutely positioned in explorer in order to fix a display 
* bug on browser resize. The bug is only noticeable on second area and 
* higher (remove absolute positioning, navigate to area two, open some 
* stuff and resize the browser). They are NOT absolute in Mozilla because 
* moz may update display multiple times in a single thread, temporarily 
* showing the dock overlaying other stuff. 
*/
ui|dock {
display: block;
overflow: hidden;
#region ie
position: absolute;
top: 0;
left: 0;
width: 100%;
heigth: 100%;
#endregion
}
ui|docktabs {
display: block;
position: relative !important;
overflow: hidden;
}
ui|docktabs ui|controlgroup.docktabscontrolgroup {
position: relative;
z-index: 2;
}
ui|docktab {
display: block;
float: left;
position: relative;
white-space: nowrap;
bottom: -100px; /* adjusted by script */
}
ui|docktab ui|control {
position: relative;	
}
ui|dockpanels {
display: block;
height: 100%;
clear: both;
overflow: hidden;
}
ui|dockpanel {  /* styles comparable to deck - please coordinate all changes! */
display: block;
height: 100%;
clear: both;
overflow: hidden;
position: absolute;
top: -10000px;
background-color: $(color:threedface);
}

/* CONTROVERSIAL STYLES - MAYBE MOVE TO SKIN? */
ui|dock.tools ui|docktab.default ui|labelbody,
ui|dock.tools ui|docktab.hover ui|labelbody {
padding-left: 0;
#moz background-position: -32px -32px;
#ie filter: none !important;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|page,
ui|editorpage,
ui|dialogpage,
ui|wizardpage {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
visibility: hidden; 	
}
ui|dialogpage.auto,
ui|wizardpage.auto {
height: auto;
}
ui|page.dialogsubpage,
ui|editorpage.dialogsubpage {
height: auto;
min-height: 100%; /* IE relies on flexibility instead */
}



ui|pagehead {
display: block;
width: 408px; /* matching fields! */
padding-left: 2px;
padding-bottom: 1em;
-vendor-user-select: none;
}
ui|pageheading {
display: block;
font-size: 120%;
font-weight: bold;
padding: 0 0 0.5em 0;
-vendor-user-select: none;	
}
ui|pagedescription {
display: block;
padding: 0 0 12px 0;
-vendor-user-select: none;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|viewset {
display: block;
position: absolute;
z-index: 1; /* needed for ie, but why? */
top: 0;
left: 0;
width: 0;
height: 0;
overflow: visible;
}
ui|view {
display: block;
overflow: hidden;
}
ui|dialogset ui|view {
z-index: 5; /* above the dialog */
}
ui|view.dockview { /* is this ever assigned? */
position: absolute;
z-index: 1;
}
ui|view.dockview ui|window { /* adjusted onload - fixes a moz display glitch */
position: absolute;
top: -10000px;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|explorer,
ui|explorerbody,
ui|explorerdecks,
ui|explorerdeck,
ui|explorersplitter,
ui|explorermenu,
ui|explorertoolbar,
ui|explorertoolbarbutton,
ui|explorerbar,
ui|explorerbarbutton {
display: block;
}
ui|explorer {
height: 100%;
overflow: hidden;
}
ui|explorerbody {
height: 100%;
overflow: hidden;
}
ui|explorertoolbar ui|toolbarbody,
ui|explorertoolbar ui|toolbargroup {
float: none;
}
ui|explorertoolbarbutton ui|labeltext {
font-weight: bold;
}
ui|explorersplitter {
height: 8px;
overflow: hidden;
background-color: $(color:threedface);
cursor: n-resize;
}
ui|explorerdecks {
display: none;
}
ui|cover#explorercover {
cursor: n-resize;
}

/*
Explorer will reach af max amount of @import statements at 32: see
http://www.juniper.net/security/auto/vulnerabilities/vuln3394.html
*/
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|functioneditor,
ui|parametereditor,
ui|sourceeditor,
ui|visualeditor,
ui|visualmultieditor,
ui|visualmultitemplateeditor {
display: block;
overflow: hidden;
position: relative; /* contain the cover */
}
ui|functioneditor textarea,
ui|parametereditor textarea,
ui|sourceeditor textarea,
ui|visualeditor textarea,
ui|visualeditor ui|selector,
ui|visualeditor div,
ui|visualmultieditor textarea,
ui|visualmultieditor ui|selector,
ui|visualmultieditor div,
ui|visualmultitemplateeditor textarea,
ui|visualmultitemplateeditor ui|selector,
ui|visualmultitemplateeditor div {
display: none;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|broadcasterset,
ui|broadcaster {
position: absolute;
visibility: hidden;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|datacollectorset,
ui|datacollector {
position: absolute;
visibility: hidden;
}
ui|fields {
display: none; /* adjusted by FieldsBinding.js */
width: 408px; /* table.fieldgroupmatrix makes up 4px on both sides! */
position: relative; /* mostly because it fixes an ie bug where fieldgroup captions would hang on tabpanel changes */
/* padding-bottom: 9px; fixes a dialog resize problem - moved to functioncalleditor.aspx where the problem is spotted */
}

/* FIELDGROUP ......................................... */

ui|fieldgroup {
display: block;
padding-top: 7px;
overflow: visible;
margin-top: 24px !important;
}
ui|fieldgroup.first {
margin-top: 0 !important;	
}
#region vista
ui|dialogpage ui|fieldgroup,
ui|wizardpage ui|fieldgroup {
border-bottom: 5px solid transparent; /* strange flex bug */
}
#endregion
table.fieldgroupmatrix td {
width: 4px;
height: 4px;
padding: 0;
}
table.fieldgroupmatrix td.group-n,
table.fieldgroupmatrix td.group-s {
width: auto;
}
table.fieldgroupmatrix td.group-e,
table.fieldgroupmatrix td.group-w {
height: auto;
}
table.fieldgroupmatrix td.group-c {
width: auto;
height: auto;
padding: 5px 0 16px 0;
width: 400px;
}
table.fieldgroupmatrix td.group-nw,
table.fieldgroupmatrix td.group-ne,
table.fieldgroupmatrix td.group-n {
height: 16px;
}
table.fieldgroupmatrix td.group-n div {
height: 4px;
overflow: hidden;
}
table.fieldgroupmatrix td.group-n div.group-label1 {
float: left;
width: 9px;
}
ui|labelbox.fieldgrouplabel {
padding: 0 6px 0 1px;
position: relative;
top: -7px;
}
ui|labelbox.fieldgrouplabel ui|labeltext {
#region default
color: $(color:activecaption);
#endregion
}
ui|fieldgroup.nolabel table.fieldgroupmatrix td.group-nw,
ui|fieldgroup.nolabel table.fieldgroupmatrix td.group-ne,
ui|fieldgroup.nolabel table.fieldgroupmatrix td.group-n {
height: 4px;
}
ui|fieldgroup.nolabel table.fieldgroupmatrix td.group-c {
padding-top: 18px;
}
ui|fieldgroup.nolabel table.fieldgroupmatrix td.group-n div.group-label1,
ui|fieldgroup.nolabel table.fieldgroupmatrix td.group-n div.group-label2 {
display: none;	
}


/* FIELDS ......................................... */

ui|field {
display: block;
margin: 0 16px 0 10px;
padding-bottom: 0;
}
ui|fielddesc {
display: block;
float: left;
width: 150px;
padding: 8px 0 0 5px;
white-space: normal;
-vendor-user-select: none;
}
ui|fielddata {
display: block;
float: right;
width: 220px;
position: relative; /* because of strange fieldhelp setup for exploder */
}
ui|fielddata input,
ui|fielddata select,
ui|fielddata textarea {
width: 214px;
padding: 0;
margin: 0;
border: none;
display: block;
}
ui|fielddata input {
padding: 5px 0 0 7px;
#moz padding-bottom: 4px;
#ie height: 24px;
#ie position: relative;
#ie top: -1px;
}

ui|datainput {
display: block;	
}
ui|datainput ui|box,
ui|datainputselector ui|box,
ui|datainputdialog ui|box,
ui|datainputbutton ui|box,
ui|urlinputdialog ui|box,
ui|textbox ui|box,
ui|editortextbox ui|box,
ui|multiselector ui|box {
border: 1px solid #7F9DB9;
background-color: white;
height: 26px;
overflow: hidden;
}
ui|datainput.disabled ui|box,
ui|datainput.readonly ui|box,
ui|datainputselector.disabled ui|box,
ui|datainputselector.readonly ui|box,
ui|datainputdialog.disabled ui|box,
ui|datainputbutton.disabled ui|box,
ui|urlinputdialog.disabled ui|box,
ui|datainputdialog.readonly ui|box,
ui|datainputbutton.readonly ui|box,
ui|urlinputdialog.readonly ui|box,
ui|textbox.disabled ui|box,
ui|textbox.readonly ui|box {
border-color: $(color:threedshadow);
background-color: $(color:threedface);
#alphabackdrop: url("${root}/images/ui/lighten.png");
}
ui|textbox ui|box,
ui|editortextbox ui|box {
height: 104px;
}
ui|datainputselector.invalid ui|box,
ui|datainputdialog.invalid ui|box,
ui|datainputbutton.invalid ui|box,
ui|urlinputdialog.invalid ui|box,
ui|datainput.invalid ui|box,
ui|textbox.invalid ui|box,
ui|editortextbox.invalid ui|box {
border-color: #A40000;
}
ui|datainputselector input,
ui|datainputdialog input,
ui|datainputbutton input,
ui|urlinputdialog input,
ui|datainput input,
ui|textbox input,
ui|editortextbox input {
border: none;
}
ui|datainputselector.readonly input,
ui|datainputdialog.readonly input,
ui|datainputbutton.readonly input,
ui|urlinputdialog.readonly input,
ui|datainput.readonly input,
ui|textbox.readonly textarea,
ui|editortextbox.readonly textarea {
cursor: default;
background-color: $(color:threedface);
#alphabackdrop: url("${root}/images/ui/lighten.png");
}
ui|datainputselector.isdisabled input,
ui|datainputdialog.isdisabled input,
ui|datainputbutton.isdisabled input,
ui|urlinputdialog.isdisabled input,
ui|datainput.isdisabled input,
ui|textbox.isdisabled textarea,
ui|editortextbox.isdisabled textarea {
cursor: default;
background-color: $(color:threedface);
-vendor-user-select: none;
-vendor-user-focus: none;
#alphabackdrop: url("${root}/images/ui/lighten.png");
}
ui|datainputselector.isdisabled ui|box,
ui|datainputdialog.isdisabled ui|box,
ui|datainputbutton.isdisabled ui|box,
ui|urlinputdialog.isdisabled ui|box,
ui|datainput.isdisabled ui|box,
ui|textbox.isdisabled ui|box,
ui|editortextbox.isdisabled ui|box,
ui|multiselector.isdisabled ui|box {
background-color: $(color:threedface);
border-color: $(color:threedshadow);
}
ui|fielddata input.warning,
ui|fielddata textarea.warning {
font-weight: bold;
color: #A40000;
}
ui|field.nodesc ui|fielddata {
width: auto;
float: none;
}

/* COMMON ......................................... */

ui|datainput,
ui|datainputselector,
ui|datainputdialog,
ui|datainputbutton,
ui|urlinputdialog,
ui|textbox,
ui|selector,
ui|simpleselector,
ui|multiselector,
ui|datadialog,
ui|postbackdialog,
ui|htmldatadialog,
ui|editortextbox {
padding: 2px;
}

/* SELECTORS ......................................... */

ui|selector {
display: block;
overflow: hidden !important; /* relevant for editor selectors */
}
ui|toolbar ui|selector { /* TODO: handle focus outline here somehow */
padding: 0;	
}
ui|toolbar ui|selector ui|clickbutton table.matrix td.c {
padding-top: 0;
padding-bottom: 0;
}
ui|selection,
ui|selector input {
display: none;	
}
ui|selector ui|clickbutton {
float: none;
margin: 0;
}
ui|selector ui|clickbutton table.matrix td.c {
padding: 0;
padding-right: 20px;
}
ui|fields ui|selector ui|clickbutton table.matrix td.c,
ui|fields ui|multiselector ui|clickbutton table.matrix td.c {
padding: 2px;
padding-top: 1px;
padding-bottom: 0;
#moz padding-bottom: 1px;
width: 204px;
#region vista
padding-top: 0px;
padding-bottom: 2px;
_padding-top: 0;
_padding-bottom: 1px;
#endregion
}
#region vista
ui|fields ui|selector ui|clickbutton table.matrix td.c ui|labelbox {
_margin-bottom: -2px;
}
#endregion
ui|fields ui|field.fieldhelp ui|selector ui|clickbutton table.matrix td.c {
width: 174px;
overflow: hidden;
}
ui|fields ui|field.fieldhelp ui|selector ui|clickbutton table.matrix td.c ui|labeltext {
width: 132px;
}
ui|selector img.selectorindicatorimage {
position: absolute;
z-index: 1;
right: 7px;
top: 4px;
-vendor-user-select: none;
}
ui|fields ui|selector img.selectorindicatorimage {
top: 5px;
}

/* SIMPLESELECTORS ............................................ */

ui|simpleselector {
display: block;
position: relative;
overflow: visible;
#region ie 
margin-top: 3px;
#endregion
}
ui|simpleselector select {
#moz padding: 4px;
display: block;
width: 216px;
border: 1px solid #7F9DB9;
background-color: white;
}
ui|simpleselector select:focus,
ui|simpleselector select:focus * {
outline: none;
}
ui|simpleselector.invalid {
padding: 1px;
border: 1px solid #A40000 !important;
}

/* MULTISELECTORS ............................................. */

ui|multiselector {
display: block;
}
ui|multiselector ui|box {
width: 216px;
-vendor-user-select: none;
padding: 5px 0 5px 0;
overflow: auto;
#ie height: 88px;
#moz height: 84px;
}
ui|field.fieldhelp ui|multiselector ui|box {
width: 186px;	
} 
ui|multiselector ui|box div {
padding: 1px 5px 2px 7px;
width: 100%;
}
ui|multiselector ui|box div.selected {
background-color: $(color:highlight);
color: $(color:highlighttext);
}
ui|multiselector ui|datadialog,
ui|multiselector ui|postbackdialog {
padding: 2px 0 0 0;
}
ui|multiselector input {
display: none;	
}

/* DATAINPUTSELECTORS ......................................... */
ui|datainputselector,
ui|datainputdialog,
ui|datainputbutton,
ui|urlinputdialog {
display: block;
position: relative;
}
ui|datainputselector ui|toolbarbutton,
ui|datainputdialog ui|toolbarbutton,
ui|datainputbutton ui|toolbarbutton,
ui|urlinputdialog ui|toolbarbutton {
margin-right: 0;
position: absolute;
right: 3px;
top: 3px;
}
#region moz
ui|datainputselector.focused ui|toolbarbutton,
ui|datainputdialog.focused ui|toolbarbutton,
ui|datainputbutton.focused ui|toolbarbutton,
ui|urlinputdialog.focused ui|toolbarbutton {
right: 2px;
top: 2px;
}
#endregion
ui|fielddata ui|datainputselector input,
ui|fielddata ui|datainputdialog input,
ui|fielddata ui|datainputbutton input,
ui|fielddata ui|urlinputdialog input {
width: 189px;
}
ui|fielddata ui|datainputselector.imagesizenormal input{
background: transparent none no-repeat 4px 4px;
padding-left: 24px;
}
ui|field.fieldhelp ui|fielddata {
position: relative;
top: -1px; /* why? */
}
ui|field.fieldhelp ui|fielddata ui|datainputselector input,
ui|field.fieldhelp ui|fielddata ui|datainputdialog input ,
ui|field.fieldhelp ui|fielddata ui|datainputbutton input ,
ui|field.fieldhelp ui|fielddata ui|urlinputdialog input {
width: 159px;
}

/* EXOTIC STUFF ................................... */

ui|nullpostbackdatadialog {
display: block;	
}

/* TEXTBOX ......................................... */

ui|textbox,
ui|editortextbox {
display: block;
}
ui|textbox,
ui|editortextbox {			
height: 108px; /* half width */
position: relative;
}
ui|textbox textarea,
ui|editortextbox textarea {
overflow: auto;
#ie padding: 5px 5px 5px 7px; /* moz applies padding fugt here! */
position: absolute;
height: 102px;
-vendor-tab-size: 4;
}

/* FULLBLOWN EDITORTEXTBOX */

ui|flexbox ui|editortextbox {
padding: 0;
border: none;
}
ui|flexbox ui|editortextbox,
ui|flexbox ui|editortextbox textarea {
width: 100%;
height: 100%;
}
ui|flexbox ui|editortextbox textarea {
font-family: "Courier New", monospace;
font-size: 13px;
margin: 0;
border: none;
}
ui|flexbox ui|editortextbox ui|box {
border: none;
height: 100%;
padding: 0;
margin: 0;
}

/* FIELDHELP ......................................... */

ui|fieldhelp { /* strange setup fixes a vanishing glitch in explorer */
height: 1px;
width: 222px;
overflow: visible;
float: right;
position: relative;
}

ui|field.fieldhelp ui|fielddata {
margin-right: 30px;
width: 190px;
}
ui|field.fieldhelp ui|fielddata input,
ui|field.fieldhelp ui|fielddata select,
ui|field.fieldhelp ui|fielddata textarea {
width: 184px;
}
ui|field.fieldhelp ui|fielddata ui|simpleselector select {
width: 186px;	
}
ui|clickbutton.fieldhelp { /* width and height needed for explorer vanishing dysfunction */
margin: 0;
margin-top: 2px;
right: 2px;
position: absolute;
width: 26px;
height: 26px;
}
ui|clickbutton.fieldhelp table.matrix td.c {
padding: 1px
}
ui|popup.fieldhelppopup {
#moz min-width: 220px;
#ie width: 220px;
}

/* FOCUS .............................................................. */

ui|fields ui|selector.focused,
ui|fields ui|multiselector.focused,
ui|fields ui|simpleselector.focused,
ui|fields ui|datainput.focused,
ui|fields ui|datainputselector.focused,
ui|fields ui|datainputdialog.focused,
ui|fields ui|datainputbutton.focused,
ui|fields ui|urlinputdialog.focused,
ui|fields ui|datadialog.focused,
ui|fields ui|postbackdialog.focused,
ui|fields ui|htmldatadialog.focused,
ui|fields ui|textbox.focused,
ui|fields ui|editortextbox.focused,
ui|fields ui|radiodatagroup.focused,
ui|fields ui|checkbox.focused {
padding: 1px;
border: 1px solid $(color:threedshadow);
#region osx
border-color: -moz-mac-focusring;
#endregion
}


/* RADIO & CHECKBOX .............................................. */

ui|radiodatagroup {	
display: block;
margin-bottom: 3px;
padding: 2px;
padding-top: 4px;
}
ui|fields ui|radiodatagroup.focused {
padding-top: 3px;	
}
ui|radio {
display: block;
width: 100%;	
}
ui|radio {
display: block;
width: 100%;
padding-bottom: 1px;
padding-top: 1px;
}
ui|radio.disabled {
color: $(color:graytext);
}
ui|datalabeltext {
display: block;
float: left;
width: 195px;
padding-left: 5px;
padding-top: 2px;
-vendor-user-select: none; /* See notes in DocumentManager.js */
}
ui|field.fieldhelp ui|datalabeltext {
width: 163px;
}
ui|checkboxgroup {
display: block;
padding-top: 4px;
padding-bottom: 2px;
margin-bottom: 3px;
}
ui|checkboxgroup ui|labelbox.invalid {
margin-bottom: 4px;	
margin-left: 1px;
margin-top: 4px;
}
ui|checkboxgroup ui|labelbox.invalid,
ui|checkboxgroup ui|labelbox.invalid * {
float: none;
}
ui|checkboxgroup ui|labelbox.invalid ui|labeltext,
ui|selector.invalid ui|clickbutton ui|labeltext {
font-weight: bold;
color: #A40000;
}
ui|selector.infobox ui|clickbutton ui|labeltext {
font-style:italic;
}
ui|checkbox {
display: block;
width: 100%;
padding: 2px;
}
ui|field.fieldhelp ui|datalabeltext {
width: 163px;
}

/* DATADIALOG ......................................................... */

ui|datadialog,
ui|postbackdialog,
ui|htmldatadialog {
display: block;
}
ui|datadialog ui|clickbutton,
ui|postbackdialog ui|clickbutton,
ui|htmldatadialog ui|clickbutton {
float: none;
margin: 0;
}
ui|datadialog input,
ui|postbackdialog input,
ui|htmldatadialog input {
display: none;
}
ui|datadialog ui|clickbutton table.matrix td.c ui|labelbox,
ui|postbackdialog ui|clickbutton table.matrix td.c ui|labelbox,
ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labelbox {
margin-left: auto;
margin-right: auto;
}
img.dialogindicatorimage {
position: absolute;
z-index: 1;
right: 7px;
top: 5px;
-vendor-user-select: none;
}
ui|fields ui|datadialog ui|clickbutton table.matrix td.c,
ui|fields ui|postbackdialog ui|clickbutton table.matrix td.c,
ui|fields ui|htmldatadialog ui|clickbutton table.matrix td.c {
padding: 2px;
padding-top: 1px;
padding-bottom: 0px;
#moz padding-bottom: 1px;
width: 204px;
#region vista
padding-top: 0px;
padding-bottom: 2px;
_padding-top: 0;
_padding-bottom: 1px;
#endregion
}
#region vista
ui|fields ui|datadialog ui|clickbutton table.matrix td.c ui|labelbox,
ui|fields ui|postbackdialog ui|clickbutton table.matrix td.c ui|labelbox,
ui|fields ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labelbox {
_margin-bottom: -2px;
}
#endregion
ui|fields ui|field.fieldhelp ui|datadialog ui|clickbutton table.matrix td.c,
ui|fields ui|field.fieldhelp ui|postbackdialog ui|clickbutton table.matrix td.c,
ui|fields ui|field.fieldhelp ui|htmldatadialog ui|clickbutton table.matrix td.c,
ui|fields ui|field.fieldhelp ui|filepicker ui|clickbutton table.matrix td.c {
width: 174px;
}

/* FILEPICKER ......................................................... */

ui|filepicker {
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
ui|filepicker input.real {
display: block;
cursor: default !important;
position: absolute;
top: 3px;
left: 0;
cursor: default;
opacity: 0;
transform: translate(-200px, 0) scale(4);
}
ui|filepicker ui|datainput.fake,
ui|filepicker ui|datainput.fake input {
width: 159px;
#ie width: 153px;
float: left;
}
ui|filepicker ui|clickbutton {
position: relative;
top: 2px;
left: 2px;
}
ui|filepicker ui|clickbutton table.matrix td.c {
padding: 2px;
padding-top: 1px;
padding-bottom: 0px;
#moz padding-bottom: 1px;
width: 204px;
#region vista
padding-top: 1px;
padding-bottom: 1px;
#endregion
}

/* CALENDAR ........................................................... */

div.calendar {
border: 1px solid $(color:threedshadow);
background-color: $(color:threedhighlight);
position: relative;
top: -1px;
#ie width: 99.9%;
}
div.calendar table {
width: 100%;
margin: 0 !important;
border-collapse: collapse;
}
div.calendar td {
padding-top: 3px;
padding-bottom: 3px;
-vendor-user-select: none;
text-align: center;
vertical-align: top;
width: 14.2%;
}
div.calendar td.active {
cursor: pointer;	
}
div.calendar td.active:hover {
background-color: $(color:highlight);
color: $(color:highlighttext);
}
div.calendar td.othermonth {
color: #bbb;	
}
div.calendar td.selectedday {
background-color: #ccc;
margin: 0;
}
div.calendar tr.month td {
border-bottom: 1px solid $(color:threedshadow);	
}
div.calendar .monthbrowse {
font-family: "Courier New", monospace;
cursor: pointer;	
}
div.calendar .monthbrowse:hover {
color: $(color:highlight);	
}

/* TOOLBARS ........................................................... */

ui|toolbar ui|field {
margin: 0;
float: left;
#ie width: 1px !important;
}
ui|toolbar ui|fielddesc,
ui|toolbar ui|fielddata {
float: left;
width: auto;
#ie width: 1px;
}
ui|toolbar ui|fielddata input,
ui|toolbar ui|fielddata select {
width: 100px;
}

/* OVERFLOW SPECIALS (NOW DISABLED IN SCRIPT!) ................................................... */

#region ie
ui|fields ui|datadialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|postbackdialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|datainputdialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|datainputbutton ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|urlinputdialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|selector ui|clickbutton table.matrix td.c ui|labeltext {
width: 162px;
overflow: hidden;
text-overflow: ellipsis;
}
ui|fields ui|field.fieldhelp ui|datadialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|field.fieldhelp ui|postbackdialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|field.fieldhelp ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|field.fieldhelp ui|datainputdialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|field.fieldhelp ui|datainputbutton ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|field.fieldhelp ui|urlinputdialog ui|clickbutton table.matrix td.c ui|labeltext,
ui|fields ui|field.fieldhelp ui|selector ui|clickbutton table.matrix td.c ui|labeltext {
width: 132px;
}
#endregion

#region moz {
ui|fields ui|datadialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|postbackdialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|datainputdialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|datainputbutton ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|urlinputdialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|selector ui|clickbutton table.matrix td.c ui|labelbody {
width: 180px;
overflow: hidden;
}
ui|fields ui|datadialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|postbackdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|datainputdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|datainputbutton ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|urlinputdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|selector ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext {
width: 142px;
overflow: hidden;
}
ui|fields ui|field.fieldhelp ui|datadialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|field.fieldhelp ui|postbackdialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|field.fieldhelp ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|field.fieldhelp ui|datainputdialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|field.fieldhelp ui|datainputbutton ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|field.fieldhelp ui|urlinputdialog ui|clickbutton table.matrix td.c ui|labelbody,
ui|fields ui|field.fieldhelp ui|selector ui|clickbutton table.matrix td.c ui|labelbody {
width: 150px;
}
ui|fields ui|field.fieldhelp ui|datadialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|field.fieldhelp ui|postbackdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|field.fieldhelp ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|field.fieldhelp ui|datainputdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|field.fieldhelp ui|datainputbutton ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|field.fieldhelp ui|urlinputdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext,
ui|fields ui|field.fieldhelp ui|selector ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labeltext {
width: 112px;
}
ui|fields ui|datadialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labelbody:after,
ui|fields ui|postbackdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labelbody:after,
ui|fields ui|htmldatadialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labelbody:after,
ui|fields ui|datainputdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labelbody:after,
ui|fields ui|datainputbutton ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labelbody:after,
ui|fields ui|urlinputdialog ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labelbody:after,
ui|fields ui|selector ui|clickbutton table.matrix td.c ui|labelbox.textoverflow ui|labelbody:after {
content: "...";
}
#endregion
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|keyset,
ui|key {
display: block;
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|bindingmappingset,
ui|bindingmapping {
display: block;
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|cursor {
display: block;
position: absolute;
width: 0;
height: 0;
overflow: visible;
z-index: 4; /* why this much needed? */
margin-top: 16px;
margin-left: 16px;
width: 24px;
height: 24px;
top: -100px;
left: -100px;
}

ui|cursor ui|labelbox.indicator {
position: relative;
top: -10px;
left: 6px;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|balloonset {
display: block;
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
z-index: 3; /* below dialogs */
}
ui|balloonset#dialogballoonset {
z-index: 5; /* above dialogs */	
}
ui|balloon {
#moz min-width: 280px;
#ie width: 280px;
display: block;
position: absolute;
overflow: visible;
-vendor-transition-property: top, left;
-vendor-transition-duration: 0.25s;
}
ui|balloon table.matrix {
width: 100%;
height: 100%;
}
ui|balloontext {
display: block;
-vendor-user-select: none;
position: relative;
z-index: 2;
padding-bottom: 4px;
}
ui|balloonspeak {
display: block;	
position: absolute;
z-index: 1;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|errorset {
display: none;
}
ui|error {
display: none;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|lazybindingset,
ui|lazybinding {
position: absolute;
visibility: hidden;
display: none;
}
@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

ui|sourcecodeviewer {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
ui|sourcecodeviewer textarea {
display: none;
}
